<template>
	<view class="v-box">
		<view class="h-flex" :style="'width:' +windowWidth+'px;height:'+windowHeight+'px;'">
			<view class="flex-box box-left video-box" style="background-color: #0055ff;">
				<video id="videoLeft" :src="videoUrl" class="video-item" controls="false" show-progress="false"
					show-play-btn="false" show-fullscreen-btn="false" />
			</view>
			<view class="flex-box box-right video-box" style="background-color: #ff0b2b;">
				<video id="videoLeft" :src="videoUrl" class="video-item" muted="true" controls="false"
					show-progress="false" show-play-btn="false" />
			</view>
		</view>
		<view class="h-flex" style="width: 100%; padding: 0 20px 0 20px;">
			<image class="play-button" @click="playVideo" :src="playButtonSrc" mode="aspectFit" />
			<text class="text">{{currentSeekText}}</text>
			<view style="display: flex;flex: 1;">
				<slider style="width: 100%;" @change="durationChange" :value="currentSeek" min="0" :max="duration"
					backgroundColor="#5d5d5d" activeColor="#fff" block-color="#fff" block-size="20" />
			</view>
			<text class="text">{{durationText}}</text>
		</view>
	</view>

</template>

<script>
	import tu from '@/common/timeUtil.js';
	export default {

		data() {
			return {
				videoUrl: '',
				playImage: '../../static/play.png',
				pauseImage: '../../static/pause.png',
				isPlay: false,
				playButtonSrc: '../../static/play.png',
				currentSeek: 0,
				currentSeekText: '0:0:0',
				duration: 100,
				durationText: '',
				windowWidth: 100,
				windowHeight: 100,
				videoLeftContext: null,
				timer: null,
			};
		},
		onLoad(option) {
			plus.navigator.setFullscreen(true)

			let systemInfo = uni.getSystemInfoSync()
			this.windowHeight = systemInfo.windowHeight - 60
			this.windowWidth = systemInfo.windowWidth
			this.videoUrl = option.path
			this.duration = parseInt(Math.ceil(option.duration))
			this.durationText = tu.formatTime(this.duration)
			console.log(this.videoUrl)

			this.videoLeftContext = uni.createVideoContext('videoLeft')

			this.timer = setInterval(() => {
				if (this.isPlay) {
					this.currentSeek = this.currentSeek + 1
					if (this.currentSeek >= this.duration) {
						this.currentSeek = this.duration
					}
					this.currentSeekText = tu.formatTime(this.currentSeek)
				}
			}, 1000)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onHide() {
			this.isPlay = false
			this.playButtonSrc = this.playImage
			this.videoLeftContext.pause()
		},
		onResize() {
			let systemInfo = uni.getSystemInfoSync()
			this.windowHeight = systemInfo.windowHeight - 60
			this.windowWidth = systemInfo.windowWidth
		},
		methods: {
			playVideo() {
				if (this.isPlay) {
					this.playButtonSrc = this.playImage
					this.isPlay = false
					this.videoLeftContext.pause()
				} else {
					this.playButtonSrc = this.pauseImage
					this.isPlay = true
					this.videoLeftContext.play()
				}
			},
			durationChange(e) {
				this.currentSeek = e.detail.value
				this.videoLeftContext.play()
				this.isPlay = true
				this.videoLeftContext.seek(this.currentSeek)
			}
		}
	}
</script>

<style>
	.video-box {
		height: 100%;
	}

	.text {
		color: #818181;
	}
</style>
